<template>
  <div class="pages">
    <gen-form ref="pageContainer" :inline="true" :form-data="formData" :form-model="searchModel" :show-condition-num="20" :show-more="true" :show-block-label="false">
      <el-form-item v-if="searchModel.length > 0" class="operation-item">
        <el-button v-shake type="primary" :size="$attrs.size || 'small'" @click="search"> 搜 索 </el-button>
        <el-button :size="$attrs.size || 'small'" @click="reset"> 重 置 </el-button>
      </el-form-item>
    </gen-form>
  </div>
</template>

<script>
export default {
  name: 'BillsManage',
  components: {
    // DebitNoteDia: () => import('./dialogs/DebitNoteDia/index'),
    // BillsMethods: () => import('./dialogs/BillsMethods/index')
  },
  data() {
    return {
      formData: {
        status: 2,
        name: '123'
      },

      //搜索相关
      searchModel: [
        {
          type: 'date',
          prop: 'createTime',
          label: '导出时间',
          attrs: {
            size: 'small',
            'start-placeholder': '创建开始日期',
            'end-placeholder': '创建结束日期'
          }

          // rangeKeys: ['createBeginTime', 'createEndTime']
        },
        {
          label: '导出状态',
          type: 'select',
          attrs: { size: 'small', clearable: true },
          prop: 'status',
          optionAttrs: {
            labelKey: 'value',
            valueKey: 'key'
          },
          options: [
            {
              value: 123,
              key: 1
            },
            {
              value: 345,
              key: 2
            }
          ]
        },
        {
          label: '季度区间',
          type: 'quarterange',
          prop: 'checkDate',
          attrs: {
            clearable: true,
            size: 'small',
            'start-placeholder': '开始开票季度',
            'end-placeholder': '结束开票季度'
          }
        },
        {
          type: 'input',
          attrs: { size: 'small', clearable: true },
          prop: 'name',
          options: () => new Promise.resolve(this.staticDicts.importOrExportSelection),

          label: '导出名称'
        }
      ],
      //自定义相关
      loading: false
    }
  },
  computed: {
    // ...mapGetters(['staticDicts', 'staticDictsFilters', 'userDictList'])
  },
  methods: {
    listAfter() {},
    //远程搜索
    search() {
      console.log('formData', this.formData)
    },
    reset() {
      console.log('formData', this.formData)
      this.formData = {}
    },
    // 下载文件
    downFileBtn() {},
    // 操作回调
    refresh() {
      this.selects = []
      this.$refs.pageContainer?.handleReset()
      this.$refs.pageContainer?.clearSelection()
    }
  }
}
</script>

<style lang="scss" scoped>
.numBars {
  width: 100%;
  height: 80px;
  box-shadow: 0 0 10px #ebebeb;
  border-radius: 15px;
  margin: 10px 0;
  padding: 10px;
  &__items {
    flex: 1;
    justify-content: flex-start;
  }
  &__items_icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    margin-right: 10px;
    color: #f1f1f1;
    font-size: 36px;
  }
}
</style>
